<script setup lang='ts'>
import { ref,onMounted,reactive, watch } from 'vue'
import { NPagination,NDataTable} from 'naive-ui'
import { getChatList } from '@/api'

// 表格数据
const columns = [
  {
    title: '模型名称',
    key: 'modelName'
  },
  {
    title: '消耗token',
    key: 'totalTokens'
  },
  {
    title: '扣除金额',
    key: 'deductCost'
  },
  {
    title: '对话内容',
    key: 'content',
	ellipsis: { tooltip: true }
  },

  {
    title: '创建时间',
    key: 'createTime'
  },
];

interface Emit {
	(e: 'update:visible', visible: boolean): void
}
const emit = defineEmits<Emit>()

// 表格数据
const tableData = ref([]);


// 分页响应式数据
const pagination = reactive({
  page: 1,
  pageSize: 10,
  pageCount: 0, // 总页数，需要根据数据总数和每页数量计算
  itemCount: 0 // 总数据条数，需要从服务器获取
});

// 监听分页数据变化，去服务器获取数据
watch([() => pagination.page, () => pagination.pageSize], () => {
  fetchData();
});

// 获取数据的方法
async function fetchData() {
  try {
    const response = await getChatList(pagination.page, pagination.pageSize);
    tableData.value = response.rows;
    pagination.pageCount = Math.ceil(response.total / pagination.pageSize);
    pagination.itemCount = response.total;
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

//页面变化处理函数
function handlePageChange(newPage: number) {
  pagination.page = newPage;
}

// 页面大小变化处理函数
function handlePageSizeChange(newPageSize: number) {
  pagination.pageSize = newPageSize;
}

onMounted(async () => {
	await fetchData()
})

</script>

<template>
	<n-data-table
		remote
		ref="actionRef"
		:columns="columns"
		:data="tableData"
		:pagination="pagination"
		:bordered="false"
		:max-height="600"
		@update:page="handlePageChange"
		@update:page-size="handlePageSizeChange"
	/>
</template>
